import React, { Component } from 'react'
import { Carousel, Flex, Grid } from 'antd-mobile'
import axios from 'axios'
import { Link } from 'react-router-dom'
import './index.scss'
import Nav1 from '@/assets/images/nav-1.png'
import Nav2 from '@/assets/images/nav-2.png'
import Nav3 from '@/assets/images/nav-3.png'
import Nav4 from '@/assets/images/nav-4.png'
import { getCurrentCity } from '@/utils/city'

const navList = [
  { title: '整租', img: Nav1, path: '/home/house' },
  { title: '合租', img: Nav2, path: '/home/house' },
  { title: '地图找房', img: Nav3, path: '/map' },
  { title: '去出租', img: Nav4, path: '/rent' },
]

export default class Index extends Component {
  state = {
    swiperList: [],
    imgHeight: 200,
    houseList: [],
    newsList: [],
    city: {
      label: '北京',
      value: '',
    },
  }

  async componentDidMount() {
    //获取轮播图的数据
    this.getSwipers()

    //获取城市信息
    const city = await getCurrentCity()
    this.setState({ city: city }, () => {
      //获取租房小组的数据
      this.getGroupList()
      //获取最新资讯的数据
      this.getNewsList()
    })

    // const myCity = new window.BMap.LocalCity()
    // myCity.get(async (result) => {
    //   // console.log(result, '获取城市信息')
    //   const cityName = result.name
    //   const res = await axios.get('http://localhost:8080/area/info', {
    //     params: {
    //       name: cityName,
    //     },
    //   })

    //   // console.log(res, '获取城市信息')
    //   const { status, body } = res.data
    //   if (status === 200) {
    //     localStorage.setItem('current_city', JSON.stringify(body))
    //     this.setState(
    //       {
    //         city: body,
    //       },
    //       () => {
    //         //获取租房小组的数据
    //         this.getGroupList()
    //         //获取最新资讯的数据
    //         this.getNewsList()
    //       }
    //     )
    //     console.log('获取城市信息', body)
    //   }
    // })
  }

  //获取轮播图的数据
  async getSwipers() {
    const res = await axios.get('http://localhost:8080/home/swiper')
    console.log('轮播图的数据', res)
    if (res.data.status === 200) {
      this.setState({
        swiperList: res.data.body,
      })
    }
  }
  //获取租房小组的数据 /home/groups
  async getGroupList() {
    const res = await axios.get('http://localhost:8080/home/groups', {
      params: {
        area: 'AREA|88cff55c-aaa4-e2e0',
      },
    })
    // console.log(res)
    const { status, body } = res.data
    if (status === 200) {
      this.setState({
        houseList: body,
      })
      console.log('租房小组的数据', body)
    }
  }
  //获取最新资讯的数据
  async getNewsList() {
    const res = await axios.get('http://localhost:8080/home/news', {
      params: {
        area: 'AREA|88cff55c-aaa4-e2e0',
      },
    })
    console.log(res)
    const { status, body } = res.data
    if (status === 200) {
      this.setState({
        newsList: body,
      })
      console.log('最新资讯的数据', body)
    }
  }

  //渲染定位搜索栏
  renderSearch() {
    return (
      <Flex className="search-box">
        <Flex className="search-form">
          <div
            className="location "
            onClick={() => this.props.history.push('/city')}
          >
            <span className="name">{this.state.city.label}</span>
            <i className="iconfont icon-arrow"> </i>
          </div>
          <div className="search-input">
            <i className="iconfont icon-seach" />
            <span className="text">请输入小区地址</span>
          </div>
        </Flex>
        {/* 地图小图标 */}
        <i
          className="iconfont icon-map"
          onClick={() => this.props.history.push('/map')}
        />
      </Flex>
    )
  }

  //渲染轮播图
  renderSwiper() {
    if (this.state.swiperList.length === 0) {
      return null
    }
    return (
      <Carousel autoplay={true} autoplayInterval={3000} infinite>
        {this.state.swiperList.map((item) => (
          <a
            key={item.id}
            href="http://www.baidu.com"
            style={{
              display: 'inline-block',
              width: '100%',
              height: this.state.imgHeight,
            }}
          >
            <img
              src={`http://localhost:8080${item.imgSrc}`}
              alt=""
              style={{ width: '100%', verticalAlign: 'top' }}
              onLoad={() => {
                // fire window resize event to change height
                window.dispatchEvent(new Event('resize'))
                this.setState({ imgHeight: 'auto' })
              }}
            />
          </a>
        ))}
      </Carousel>
    )
  }

  //渲染导航模块
  renderNav() {
    return (
      <div className="nav">
        <Flex>
          {navList.map((item) => (
            <Flex.Item key={item.title}>
              <Link to={item.path}>
                <img src={item.img} alt="" />
                <p>{item.title}</p>
              </Link>
            </Flex.Item>
          ))}
        </Flex>
      </div>
    )
  }

  //渲染租房小组
  renderGroup() {
    return (
      <div className="group">
        {/* 标题 */}
        <div className="group-title">
          <h3>租房小组</h3>
          <span className="more">更多</span>
        </div>
        {/* 内容 */}
        <div className="group-content">
          <Grid
            hasLine={false}
            square={false}
            data={this.state.houseList}
            columnNum={2}
            renderItem={(item, index) => (
              <Flex className="group-item" justify="around">
                <div className="desc">
                  <p className="title">{item.title}</p>
                  <span className="info">{item.desc}</span>
                </div>
                <img src={`http://localhost:8080${item.imgSrc}`} alt="" />
              </Flex>
            )}
          />
        </div>
      </div>
    )
  }

  //渲染最新资讯
  renderNews() {
    return (
      <div className="news">
        <h3 className="news-title">最新资讯</h3>
        {this.state.newsList.map((item) => (
          <div key={item.id} className="news-item">
            <div className="imgwrap">
              <img src={`http://localhost:8080${item.imgSrc}`} alt="" />
            </div>
            <Flex className="content" direction="column" justify="between">
              <h3 className="title">{item.title}</h3>
              <Flex className="info" justify="between">
                <span>{item.date}</span>
                <span>{item.from}</span>
              </Flex>
            </Flex>
          </div>
        ))}
      </div>
    )
  }

  render() {
    return (
      <div>
        {/* 轮播图 */}
        <div className="carousel" style={{ height: this.state.imgHeight }}>
          {/* 渲染定位搜索栏 */}
          {this.renderSearch()}

          {this.renderSwiper()}
        </div>
        {/* 渲染导航模块 */}
        {this.renderNav()}

        {/* 渲染租房小组模块 */}
        {this.renderGroup()}

        {/* 渲染最新资讯 */}
        {this.renderNews()}
      </div>
    )
  }
}
